import React, { Component } from 'react';
import { renderRoutes } from 'react-router-config';
import styled from 'styled-components';
import indexicon1 from '../images/index1.png';
import indexicon2 from '../images/index2.png';
import myicon1 from '../images/my1.png';
import myicon2 from '../images/my2.png'


const AllDIV = styled.div`
position:fixed;
bottom:0;
left:0;
width: 100%;
background-color: #fff;
.foot{
    height: 40px;
    width: 100%;
    border-top: 1px solid #c4c4c4;
    display: flex;
    background-color: #fff;
}

.foot>b{
    flex: 1;
    height: 40px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.foot>b.sel>span:nth-child(2){
    color: #de3232;
}
.foot>b.sel>.indexicon{
    background: url(${indexicon2});
    background-size: contain;
}

.foot>a.sel>.myicon{
    background: url(${myicon2});
    background-size: contain;
}


.indexicon{
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(${indexicon1});
    background-size: contain;
}
.myicon{
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(${myicon1});
    background-size: contain;
}

.foot>b>span:nth-child(2){
    color: #787878;
    font-size: 12px;
    margin-top: -10px;
}



`

class All extends Component {
    componentDidMount() {
        // console.log(this.props)
        //页面挂载完成就跳转到index页面
        this.props.history.replace('/index')
    }
    goindex = () => {
        this.props.history.replace('/index')
    }
    gomy = () => {
        this.props.history.replace('/my')
    }
    render() {
        return (
            <>
                {
                    renderRoutes(this.props.route.routes)
                }
                <AllDIV>
                    <div className="foot">
                        <b className={this.props.location.pathname === '/index' ? 'sel' : ''} onClick={this.goindex}>
                            <span className="indexicon"></span>
                            <span>首页</span>
                        </b>
                        <b className={this.props.location.pathname === '/my' ? 'sel' : ''} onClick={this.gomy}>
                            <span className="myicon" ></span>
                            <span>我的</span>
                        </b>
                    </div>
                </AllDIV>

            </>
        )


    }
}

export default All;
